<template>
  <a-drawer
    width="50%"
    title="进件详情"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }"
    @close="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" layout="vertical">
      <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
        <!-- 基本信息 -->
        <a-descriptions :title="form.id" :column="3">
          <a-descriptions-item label="客户姓名" :span="1">
            <span>{{ form.customerName || "~" }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="电话" :span="1">
            <span>{{ form.phone || "~" }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="客服" :span="1">
            <span>{{ form.servcieUserName || "~" }}</span>
          </a-descriptions-item>
        </a-descriptions>

        <a-rows>
          <a-col :span="24" v-if="false">
            <a-steps size="small">
              <a-step status="finish" title="邀约上门" disabled>
                <a-icon slot="icon" type="check-circle" theme="filled" />
              </a-step>
              <a-step status="process" title="客户到店" disabled>
                <a-icon slot="icon" type="loading" />
              </a-step>
              <a-step status="wait" title="销售接单" disabled>
                <a-icon slot="icon" type="right" size="small" />
              </a-step>
              <a-step status="wait" title="方案确认" disabled />
              <a-step status="wait" title="客服接单" disabled />
              <a-step status="wait" title="方案预审" disabled />
              <a-step status="wait" title="费率确认" disabled />
              <a-step status="wait" title="资料信审" disabled />
              <a-step status="wait" title="额度审批" disabled />

              <a-step status="wait" title="费用确认" disabled />

              <a-step status="wait" title="签约" disabled />

              <!-- <a-step status="wait" title="请款" disabled />
              <a-step status="wait" title="放款" disabled />
              <a-step status="wait" title="回款" disabled /> -->
            </a-steps></a-col
          >
          <a-col :span="24">
            <a-tabs v-model="activeTabKey" type="card">
              <a-tab-pane key="product" tab="签约产品">
                <!-- 产品一 -->
                <a-descriptions
                  v-if="
                    form.productId && form.productId === form.qianyueProductId
                  "
                  :column="2"
                  style="margin-bottom: 10px"
                  title="产品信息"
                >
                  <a-descriptions-item label="服务机构（一）">
                    <span>{{ getOrgTypeLabel(form.orgType) || "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="产品名称（一）">
                    <span>{{
                      getProductName(form.productId, productList) || "~"
                    }}</span>
                  </a-descriptions-item>
                </a-descriptions>

                <!-- 产品二 -->
                <a-descriptions
                  v-if="
                    form.productIdTwo &&
                    form.productIdTwo === form.qianyueProductId
                  "
                  :column="2"
                  style="margin-bottom: 10px"
                  title="产品信息"
                >
                  <a-descriptions-item label="服务机构（二）">
                    <span>{{ getOrgTypeLabel(form.orgTypeTwo) || "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="产品名称（二）">
                    <span>{{
                      getProductName(form.productIdTwo, productListTwo) || "~"
                    }}</span>
                  </a-descriptions-item>
                </a-descriptions>

                <!-- 产品三 -->
                <a-descriptions
                  v-if="
                    form.productIdThree &&
                    form.productIdThree === form.qianyueProductId
                  "
                  :column="2"
                  style="margin-bottom: 10px"
                  title="产品信息"
                >
                  <a-descriptions-item label="服务机构（三）">
                    <span>{{ getOrgTypeLabel(form.orgTypeThree) || "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="产品名称（三）">
                    <span>{{
                      getProductName(form.productIdThree, productListThree) ||
                      "~"
                    }}</span>
                  </a-descriptions-item>
                </a-descriptions>

                <a-descriptions :column="2" title="服务费用">
                  <a-descriptions-item label="客户是否同意服务费用" :span="2">
                    <span v-if="form.agreeServiceAmount === '0'">
                      <a-tag color="#87d068">同意</a-tag>
                    </span>
                    <span v-else-if="form.agreeServiceAmount === '1'">
                      <a-tag>不同意</a-tag>
                    </span>
                    <span v-else> ~ </span>
                  </a-descriptions-item>
                  <a-descriptions-item
                    v-if="form.agreeServiceAmount != '1'"
                    label="服务费"
                  >
                    <span>{{
                      form.serviceAmount ? `¥${form.serviceAmount}` : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="费用备注" :span="2">
                    <span>{{ form.serviceAmountRemark || "~" }}</span>
                  </a-descriptions-item>
                </a-descriptions>

                <a-descriptions
                  :column="3"
                  style="margin-top: 10px"
                  title="贷款信息"
                >
                  <a-descriptions-item label="申请金额（元）">
                    <span>{{ form.yxEdu ? `¥${form.yxEdu}` : "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="签约金额（元）">
                    <span>{{ form.sjEdu ? `¥${form.sjEdu}` : "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="放款时间">
                    <span>{{ form.fkTime || "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="分期时间（月数）">
                    <span>{{
                      form.fenqiTime ? `${form.fenqiTime}个月` : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="还款方式">
                    <span>{{
                      getDictLabel(form.backType, backTypeOptions) || "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="年利率">
                    <span>{{ form.lv ? `${form.lv}%` : "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="月供金额（元）">
                    <span>{{
                      form.monthAmount ? `¥${form.monthAmount}` : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="抵押时间（天数）">
                    <span>{{
                      form.diyaTime ? `${form.diyaTime}天` : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="签单时间">
                    <span>{{ form.qiandanTime || "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="到期时间">
                    <span>{{ form.overTime || "~" }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="每月还款日">
                    <span>{{
                      form.monthlyPayDate ? `${form.monthlyPayDate}日` : "~"
                    }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>

              <a-tab-pane key="other" tab="其他信息">
                <a-descriptions :column="4" style="margin-top: 10px">
                  <a-descriptions-item label="合同签署">
                    <span>{{
                      form.hetongQianshu === "1"
                        ? "是"
                        : form.hetongQianshu === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="服务合同">
                    <span>{{
                      form.serviceContractSign === "1"
                        ? "是"
                        : form.serviceContractSign === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="GPS安装">
                    <span>{{
                      form.isGps === "1"
                        ? "是"
                        : form.isGps === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="钥匙配置">
                    <span>{{
                      form.beiyongKey === "1"
                        ? "是"
                        : form.beiyongKey === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="抵押下单">
                    <span>{{
                      form.diyaSign === "1"
                        ? "是"
                        : form.diyaSign === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="抵押寄出">
                    <span>{{
                      form.diyaSendOut === "1"
                        ? "是"
                        : form.diyaSendOut === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="车辆保单">
                    <span>{{
                      form.carInsurancePolicy === "1"
                        ? "是"
                        : form.carInsurancePolicy === "0"
                        ? "否"
                        : "~"
                    }}</span>
                  </a-descriptions-item>
                </a-descriptions>
                <a-descriptions :column="1">
                  <a-descriptions-item label="备注" :span="4">
                    <span>{{ form.remark || "~" }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-rows>

        <!-- 标签页导航 -->
      </a-spin>

      <div class="bottom-control">
        <a-space>
          <a-button @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>

    <a-modal
      :visible="chooseUserVisible"
      title="选择客服"
      v-if="chooseUserVisible"
      width="55%"
      @ok="chooseUserVisible = false"
      @cancel="chooseUserVisible = false"
      :dialog-style="{ top: '10px' }"
    >
      <change-user
        @getUser="handleManualShare"
        :isCheckBox="true"
        :isKefu="1"
      />
    </a-modal>
  </a-drawer>
</template>

<script>
import BizJinjianInfoEditForm from "./BizJinjianInfoForm";
export default {
  ...BizJinjianInfoEditForm,
};
</script>

<style scoped>
.ant-descriptions-title {
  font-size: 16px;
  font-weight: 600;
  color: #1890ff;
}
</style>
